/* eslint-disable jsx-a11y/mouse-events-have-key-events */
import React, { PureComponent } from 'react';
import { Icon } from 'antd';
import classNames from 'classnames';
import { getEmptyImage } from 'react-dnd-html5-backend';
import {
  DragDecorator,
  DropDecorator,
  ResizeDecorator,
} from '@design/desktop/decorator';
import './Block.less';

@DragDecorator()
@DropDecorator()
@ResizeDecorator()
class Block extends PureComponent {
  state = {
    hovered: false,
  };

  componentDidMount() {
    const { connectDragPreview } = this.props;
    connectDragPreview(getEmptyImage());
  }

  onMouseOver = event => {
    event.stopPropagation();
    this.setState({
      hovered: true,
    });
  };

  onMouseOut = event => {
    event.stopPropagation();
    this.setState({
      hovered: false,
    });
  };

  onDelete = () => {
    const { editor, node } = this.props;
    editor.removeNode(node.key);
  };

  onEdit = () => {
    const { editor, node } = this.props;
    if (editor.showPropertyEditor) {
      editor.showPropertyEditor(node);
    }
  };

  renderInlineToolbar = () => {
    return (
      <div className="inline-toolbar">
        <Icon type="edit" onClick={this.onEdit} />
        <Icon type="delete" onClick={this.onDelete} />
        {/* <Icon type="drag" style={{ cursor: 'move' }} /> */}
      </div>
    );
  };

  render() {
    const { attributes, isSelected, children, node, editor } = this.props;
    const { connectDragSource, connectDropTarget, isDragging } = this.props;
    const { renderResizer, rect } = this.props;
    const { hovered } = this.state;
    const className = classNames('block', {
      selected: isSelected,
      hovered,
    });
    const style = node.style.toJS();
    style.top = rect.y || node.position.y;
    style.left = rect.x || node.position.x;
    style.width = rect.width || style.width;
    style.height = rect.height || style.height;
    if (isDragging) {
      style.zIndex = 1100;
      style.pointerEvents = 'none';
    }
    if (isSelected) {
      style.cursor = 'move';
    }
    if (!style.position) {
      style.position = 'absolute';
    }
    const isVoid = editor.isVoid(node);
    const isInline = editor.isInline(node);
    const content = (
      <div
        {...attributes}
        style={style}
        className={className}
        onMouseOver={this.onMouseOver}
        onMouseOut={this.onMouseOut}
        id={node.key}
      >
        {isSelected && this.renderInlineToolbar()}
        {isSelected && renderResizer(isInline ? [ 'left', 'right' ] : undefined)}
        {isVoid ? (
          <div
            style={{ width: '100%', height: '100%', overflow: 'hidden' }}
            onClickCapture={event => event.stopPropagation()}
          >
            {children}
          </div>
        ) : (
          <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
            {children}
          </div>
        )}
      </div>
    );
    if (isVoid || isDragging) {
      return connectDragSource(content);
    }
    return connectDropTarget(connectDragSource(content));
  }
}

export default Block;
